<template>
  <van-popup v-model:show="showDetail" duration=".2" position="bottom" :style="{ height: '100%', width: '100%' }">
    <div class="fixed-bg">
      <img :src="nowPlay.album.picUrl" style="width:100%;height: 100%;">
    </div>
    <div class="wrap">

      <!-- 头部 -->
      <div class="head">
        <van-icon name="arrow-down" size="24" @click="hdShowLyric" />
        <div class="title">
          <p class="van-ellipsis">{{ nowPlay.musicName }}</p>
          <b class="van-ellipsis">{{ nowPlay.artists[0].name }}</b>
        </div>
        <van-icon class="share" name="share-o" size="24" @click="shareRef.showShare = true" />
      </div>

      <!-- 中间 -->
      <div class="main">
        <!-- 默认的CD动画 -->
        <div class="cds" v-show="!showLyric" @click="showLyric = true;">
          <div class="zhen" :class="{ 'active': isPlay }">
            <img class="van-image" src="@/assets/images/zhen.png" />
          </div>
          <div class="cd" :class="{ 'active': isPlay }">
            <div class="cd-box">
              <img class="cd-wai" src="@/assets/images/cd.png" />
              <img class="cd-nei" :src="nowPlay.album.picUrl" />
            </div>
          </div>
        </div>

        <!-- 切换到歌词 -->
        <Lyric ref="lyricRef" class="lyric" v-show="showLyric" @click="showLyric = false"></Lyric>
      </div>

      <!-- 底部 -->
      <div class="footer">
        <div class="footer-top footer-flex">
          <li v-for="item in footerTop" @click="hdVal(item.val, item.name)">
            <van-icon :name="item.icon" size="24" />
          </li>
        </div>

        <!-- 进度条 -->
        <div class="footer-main">
          <div class="time">{{ startTime }}</div>
          <van-slider v-model="percentage" @change="sliderChange" active-color="#FE3A3A">
            <template #button>

            </template>
          </van-slider>
          <div class="time">{{ endTime }}</div>
        </div>

        <!-- 切换、播放 -->
        <div class="footer-bottom footer-flex">
          <li @click="xunhuan">
            <van-icon name="replay" />
          </li>
          <li @click="palyPre">
            <van-icon name="arrow-left" />
          </li>
          <li>
            <van-icon v-show="isPlay" name="pause-circle-o" size="60" @click="hdPause" />
            <van-icon v-show="!isPlay" name="play-circle-o" size="60" @click="hdPlay" />
          </li>
          <li @click="playNext">
            <van-icon name="arrow" />
          </li>
          <li @click="hdPlayList">
            <van-icon name="ascending" />
          </li>
        </div>
      </div>

    </div>
    <Share ref="shareRef"></Share>
    <Comment ref="commentRef"></Comment>
  </van-popup>

</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { PlayStore } from '@/store/playlist'
import { Toast } from 'vant'
import Share from '@/components/share/Share.vue'
import Lyric from '@/components/musicPlayer/MusicLyric.vue'
import Comment from '@/components/musicPlayer/MusicComment.vue'

const playStore = PlayStore();
let { nowPlay } = storeToRefs(playStore);

const shareRef = ref();
const lyricRef = ref();

let data = reactive({
  showDetail: false,  //弹出详情页
  showLyric: false,  //显示歌词
  footerTop: [
    {
      icon: 'like-o',
      val: '喜欢',
      name: 'like'
    },
    {
      icon: 'down',
      val: '下载',
      name: 'down'
    },
    {
      icon: 'fire-o',
      val: '火热',
      name: 'hot'
    },
    {
      icon: 'chat-o',
      val: '评论',
      name: 'comment'
    },
    {
      icon: 'ellipsis',
      val: '更多',
      name: 'more'
    },
  ],

})
let { showDetail, showLyric, footerTop } = toRefs(data);

const props = defineProps({
  isPlay: {
    default: false
  },
  percentage: {
    default: 0
  },
  startTime: {
    default: 0
  },
  endTime: {
    default: 0
  },
  currentTime: {  //当前时间 
    default: 0
  }
})

const emit = defineEmits(['hdBtn', 'changePlay', 'changeSilder']);

const hdShowLyric = () => {
  showDetail.value = false;
}

// 点击进度条时
const sliderChange = (data) => {
  emit('changeSilder', data)
}

// 播放按钮
const hdPlay = () => {
  emit('changePlay', true)
  emit('hdBtn', 'play')
}

// 暂停按钮
const hdPause = () => {
  emit('changePlay', false)
  emit('hdBtn', 'pause')
}

// 播放列表
const hdPlayList = () => {
  emit('hdBtn', 'playList')
}

// 上、下一首
const palyPre = () => {
  emit('hdBtn', 'playPre')
}
const playNext = () => {
  emit('hdBtn', 'playNext')
}


const xunhuan = () => {
  Toast('点击了循环')
}

// 底部上排点击
let commentRef = ref();
const hdVal = (val, name) => {
  if (name == 'comment') {
    console.log(commentRef.value);
    commentRef.value.showComment = true;
    commentRef.value.getComment(1);
  } else {
    Toast('点击了' + val);
  }

}


defineExpose({
  showDetail,
})
</script>
  
<style lang='less' scoped>
.fixed-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  //虚化
  filter: blur(100px);
}

.wrap {
  padding: 20px 40px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .head {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    color: #FFF;

    .title {
      text-align: center;
      flex: 1;
      max-width: 400px;
      font-weight: normal;

      p {
        font-size: 36px;
      }

      b {
        font-size: 30px;
        letter-spacing: 2px;
      }
    }
  }

  .main {
    height: 100%;
    margin-top: 40px;
    flex: 1;
    overflow-x: scroll;

    .lyric {
      width: 100%;
      height: 100%;
    }

    .cds {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .zhen {
      width: 170px;
      z-index: 20;
      transform: translate(70px, 0);

      .van-image {
        max-width: 100%;
        transform: rotate(-20deg);
        transform-origin: 0 0;
        transition: all 1s;
      }

      &.active {
        .van-image {
          transform: rotate(0deg);
          transition: all 1s;
        }
      }
    }

    .cd {
      position: relative;
      text-align: center;
      width: 100%;
      transform: translate(0, -135px);

      img {
        max-width: 100%;
        height: 100%;
      }

      .cd-box {
        position: relative;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        animation: cd 10s linear infinite;
        animation-play-state: paused;

        .cd-wai {
          width: 500px;
          height: 500px;
          position: absolute;
          left: 0;
        }

        .cd-nei {
          width: 350px;
          height: 350px;
          border-radius: 50%;
        }
      }

      &.active {
        .cd-box {
          animation-play-state: running;
        }
      }

      @keyframes cd {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    }
  }

  .footer {
    // position: fixed;
    // bottom: 40px;
    width: 100%;
    color: #FFF;
    margin-top: 20px;

    .footer-flex {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
    }

    .footer-main {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;

      .van-slider {
        flex: 1;
        margin: 60px 20px;
      }

      .time {
        color: #FFF;
        font-size: 30px;
      }

    }
  }
}
</style>